<!--  -->
<template>
  <div class="detailBox">
    <div class="header">
      <van-nav-bar left-arrow class="return" @click-left="onClickLeft">
        <template #right>
          <img :src="share" class="share" />
        </template>
      </van-nav-bar>
      <img class="coverImg" :src="movie.medium" alt="" />
      <img class="btn" src="@/assets/images/moviesdec/btn.png" alt="" />
    </div>
    <div class="content">
      <div class="des">
        <div class="title">
          <h3 class="desTitle">{{ movie.title }}</h3>
          <span class="time">{{ movie.longtime }}</span>
        </div>
        <div class="etitle">
          Pride & Prejudice
        </div>
        <div class="grade">
          <div class="start">
            <img class="gradeImg" src="@/assets/images/moviesdec/grade.png" />
            <img class="gradeImg" src="@/assets/images/moviesdec/grade.png" />
            <img class="gradeImg" src="@/assets/images/moviesdec/grade.png" />
            <img class="gradeImg" src="@/assets/images/moviesdec/grade.png" />
            <img class="gradeImg" src="@/assets/images/moviesdec/grade02.png" />
          </div>
          <div class="score">
            <span>{{ movie.rating_average }}</span>
            <span>/10</span>
          </div>
          <div class="comment">
            <img class="comIfo" src="@/assets/images/moviesdec/remark.png" />
            <img class="comIfo" src="@/assets/images/moviesdec/start.png" />
          </div>
        </div>
        <div class="nav">
          <router-link to="/moviedetail/:this.$route.params.id" tag="span"
            >简介</router-link
          >
          <router-link to="/filmReview" tag="span">影评</router-link>
          <router-link to="/moviedetail/:id" tag="span">讨论</router-link>
          <router-link to="/moviedetail/:id" tag="span">更多</router-link>
        </div>
        <div class="intro">
          <span class="intro-des">
            {{ movie.summary }}
          </span>
          <span class="more">查看更多></span>
        </div>
      </div>
      <div class="relevantContent">
        <h2>演职人员</h2>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="item in movie.players" :key="item.id">
            <img
              :src="item.avatar"
              class="actor"
              @click="actordetail(item.playerId)"
            />
            <div class="actorname">
              <p>{{ item.name }}</p>
              <p>饰{{ item.name_en }}</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="actnum">全部{{ length }}位演员</div>
      <div class="relevantContent">
        <h2>视频</h2>
        <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide v-for="item1 in movie.trailers" :key="item1">
            <div class="plot">
              <video :src="item1" controls></video>
              <img
                src="../../assets/images/moviesdec/recommend.png"
                class="rec"
              />
              <div class="btn">
                <img
                  src="../../assets/images/moviesdec/smallbtn.png"
                  class="btnImg"
                />
                <span class="btnTime">03:34</span>
              </div>
            </div>
            <div class="plotdec">
              <p>
                "《傲慢与偏见》：百年经典的绝美呈现，一次现实与理想的爱情碰撞"
              </p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="actnum">全部{{ videolength }}个视频</div>
      <div class="relevantContent">
        <h2>票房</h2>
      </div>
      <div class="actnumDetail">
        <div class="actnumDetail1">
          <p>2</p>
          <p>今日票房排行</p>
        </div>
        <div class="actnumDetail1">
          <p>暂无</p>
          <p>首周票房（万）</p>
        </div>
        <div class="actnumDetail1">
          <p>2660</p>
          <p>今日票房排行</p>
        </div>
      </div>
      <router-link to="/box-office" class="actnum" tag="div"
        >票房详情</router-link
      >
    </div>
    <div class="bottom">
      <van-button type="primary" size="large" @click="goPick"
        >特惠选座</van-button
      >
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import share from '@/assets/images/moviesdec/share.png'
import recommend from '@/assets/images/moviesdec/recommend.png'
import smallbtn from '@/assets/images/moviesdec/smallbtn.png'
import Axios from 'axios'

export default {
  name: 'carrousel',
  data() {
    return {
      movie: [],
      length,
      share,
      // videolength,
      banner: [
        {
          rec: recommend,
          plot: '《傲慢与偏见》：百年经典的绝美呈现，一次现实与理想的爱情碰撞',
          btn: smallbtn,
        },
        {
          rec: recommend,
          plot: '借了不朽经典的光，拍了一部沦为普通的爱情故事',
          btn: smallbtn,
        },
      ],
      swiperOptions: {
        slidesPerView: 3,
      },
      swiperOption: {
        slidesPerView: 2,
      },
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    actordetail(b) {
      this.$router.push({ name: 'actor', params: { id: b } })
    },
    goPick() {
      this.$router.push({name:"pickSeat" })
    },
    goActor() {
      this.$router.push({name: "actor" })
    }
  },
  created() {
    console.log(this.$route.params.id)
    axios
      .get(`http://bufantec.com/api/douban/movie/subject`, {
        params: { mId: this.$route.params.id },
      })
      .then((res) => {
        //   console.log(res.data.data);
        this.movie = res.data.data
        console.log(this.movie)
        this.length = this.movie.players.length
        console.log(this.length)
        this.videolength = this.movie.trailers.length
        console.log(this.videolength)
      })
  },
}
</script>
<style scoped lang="scss">
.detailBox {
  background-color: #22262d;
  width: 100%;
}
[class*='van-hairline']::after {
  border: 0 solid transparent;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
.van-nav-bar {
  padding-top: 20px;
}
.header {
  position: relative;
  width: 750px;
  height: 508px;
  background: url(~@/assets/images/moviesdec/bg.png) no-repeat;
  background-size: 750px 508px;
  margin-bottom: 72px;

  .return {
    background-color: transparent;
    .share {
      width: 38px;
      height: 38px;
    }
  }
  .coverImg {
    position: absolute;
    top: 276px;
    left: 40px;
    width: 192px;
    height: 262px;
  }
  .btn {
    position: absolute;
    top: 390px;
    right: 210px;
    width: 100px;
    height: 100px;
  }
}
.content {
  margin-left: 40px;
  .desTitle {
    display: inline-block;
    font-size: 40px;
    color: #fff;
    line-height: 56px;
  }
  .time {
    width: 116px;
    height: 40px;
    background-image: linear-gradient(129deg, #b5459c 0%, #5f48aa 100%);
    display: inline-block;
    margin-left: 20px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    border-radius: 15px;
  }
  .etitle {
    margin-top: 12px;
    font-size: 28px;
    color: #fff;
    opacity: 0.56;
  }
}
.grade {
  height: 44px;
  margin-top: 16px;
  .start {
    float: left;
    .gradeImg {
      float: left;
      width: 44px;
      height: 44px;
      margin-right: 20px;
    }
  }
  .score {
    float: left;
    line-height: 44px;
    margin-left: 8px;
    span:nth-child(1) {
      font-size: 44px;
      color: #fbc34a;
    }
    span:nth-child(2) {
      opacity: 0.52;
      font-size: 24px;
      color: #ffffff;
    }
  }
  .comment {
    float: right;
    margin-right: 40px;
    .comIfo {
      float: left;
      width: 36px;
      height: 34px;
      margin-left: 34px;
      margin-top: 5px;
    }
  }
}
.nav {
  margin-top: 38px;
  margin-bottom: 20px;
  span {
    display: inline-block;
    margin-right: 52px;
    font-size: 28px;
    line-height: 40px;
    opacity: 0.51;
    color: #ffffff;
  }
  span:hover:after,
  span:nth-child(1):after {
    display: block;
    content: '';
    width: 58px;
    height: 6px;
    background-image: linear-gradient(135deg, #f16481 0%, #f1906c 100%);
  }
  span:hover,
  span:nth-child(1) {
    opacity: 1;
  }
}
.intro {
  width: 660px;
  height: 132px;
  .intro-des {
    height: 100%;
    opacity: 0.29;
    font-size: 24px;
    color: #ffffff;
    margin-right: 46px;
    margin-top: 16px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    flex-direction: column;
  }
  .more {
    font-size: 28px;
    color: #fbc34a;
    float: right;
  }
}
.relevantContent {
  width: 750px;
  margin: 36px 0 20px 0;
  h2 {
    font-size: 36px;
    color: #ffffff;
    margin-bottom: 20px;
  }
}
.actnum {
  margin-top: 17px;
  font-size: 28px;
  line-height: 40px;
  color: #fbc34a;
  text-align: center;
}
.swiper-slide {
  .actor {
    width: 200px;
    height: 280px;
  }
  .actorname {
    width: 200px;
    text-align: center;
    color: #fff;
    p:nth-child(1) {
      font-size: 28px;
      height: 40px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    p:nth-child(2) {
      font-size: 24px;
      opacity: 0.62;
      height: 33px;
    }
  }
}
.swiper-slide {
  .plot {
    position: relative;
    video:nth-child(1) {
      width: 350px;
      height: 240px;
    }
    .rec {
      position: absolute;
      top: 18px;
      left: 20px;
      width: 76px;
      height: 28px;
    }
    .btn {
      float: left;
      position: absolute;
      bottom: 22px;
      left: 20px;
      height: 20px;
      width: 90px;

      .btnImg {
        float: left;
        width: 20px;
        height: 20px;
      }
      .btnTime {
        float: left;
        vertical-align: middle;
        font-size: 16px;
        color: #ffffff;
        margin-left: 14px;
      }
    }
  }
  .plotdec {
    width: 380x;
    font-size: 24px;
    color: #ffffff;
  }
}
.actnumDetail {
  margin-right: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .actnumDetail1 {
    text-align: center;
    color: #ffffff;
    p:nth-child(1) {
      font-size: 36px;
    }
    p:nth-child(2) {
      font-size: 24px;
      opacity: 0.45;
    }
  }
}
.bottom {
  .van-button {
    background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
    box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
    border-radius: 12px;
    height: 100px;
    font-size: 36px;
    border: 0;
    margin-top: 20px;
  }
}
</style>
